import { Container } from '@/components/web-react'
import {memo} from 'react'
import { Button, Input, Space } from '@arco-design/web-react';

const TextArea = Input.TextArea;

function SongDetail() {
  return (
    <div className='container'>
      <div className={'w-full bg-primary-500 h-56 p-5 flex gap-2 items-center select-none'}>
        <div className='size-44 rounded overflow-hidden border border-solid border-primary-200'>
          {/* 音乐封面 */}
          <img src="https://picsum.photos/400" width={'100%'} height={'100%'} alt="" />
        </div>
        <div className='ml-6 h-full flex-1 flex flex-col gap-2'>
          {/* 音乐标题 */}
          <h1 className='text-white text-2xl font-bold mt-0'>音乐标题</h1>
          {/* 音乐作者 */}
          <p className='text-white text-sm'>音乐作者</p>
          {/* 音乐时长 */}
          <p className='text-white text-sm'>音乐时长</p>
        </div>
      </div>
      <div className='mt-2 container flex gap-2'>
        {/* 音乐介绍 */}
        <div className='flex-1 w-full h-ful relative'>歌词</div>
        <div className='w-64 px-4 py-2 bg-white text-gray-800 select-none'>
          <div className='mb-6 '>
            <p className='text-primary-600 text-lg'>精选好歌</p>
            <div className='my-2'>
              <p className=' text-base'>野孩子</p>
              <p className='text-primary-600 text-xs'>杨千泽</p>
            </div>
            <div className='my-2'>
              <p className=' text-base'>野孩子</p>
              <p className='text-primary-600 text-xs'>杨千泽</p>
            </div>
            <div className='my-2'>
              <p className=' text-base'>野孩子</p>
              <p className='text-primary-600 text-xs'>杨千泽</p>
            </div>
            <div className='my-2'>
              <p className=' text-base'>野孩子</p>
              <p className='text-primary-600 text-xs'>杨千泽</p>
            </div>
          </div>
          <div className='mt-2 '>
            <p className='text-primary-600 text-lg'>受欢迎的歌曲</p>
            <div className='flex gap-3 my-2'>
              <div className='text-xl'>#1</div>
              <div>
                <p className='text-base'>勇</p>
                <p className='text-primary-600 text-xs'>杨千泽</p>
              </div>
            </div>
            <div className='flex gap-3 my-2'>
              <div className='text-xl'>#2</div>
              <div>
                <p className='text-base'>稀客</p>
                <p className='text-primary-600 text-xs'>杨千泽</p>
              </div>
            </div>
            <div className='flex gap-3 my-2'>
              <div className='text-xl'>#3</div>
              <div>
                <p className='text-base'>再见二丁目</p>
                <p className='text-primary-600 text-xs'>杨千泽</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <Container title={`更多---的歌曲`}>

      </Container>

      <Container title={'评论'} titleAfter={`共${0}条评论`}>
        <Space direction='vertical' size={16} className='w-full'>
          <TextArea placeholder='Enter something' showWordLimit maxLength={900} allowClear clearIcon autoSize={{ minRows: 4, maxRows: 10 }} />
          <Button type='primary' onClick={() => { console.log('提交评论') }}>发表评论</Button>
        </Space>
      </Container>
    </div>

  )
}

export default memo(SongDetail)
